Dom坐标移动

2020.6.17 星期三 15：43

Math.sin

Math.sin() 函数返回一个数值的正弦值。
x:一个数值（以弧度为单位）。
sin 方法返回一个 -1 到 1 之间的数值，表示给定角度（单位：弧度）的正弦值。

Math.sin(Math.PI / 180 * 30) = 0.49999999999

atan2 方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (x, y) 与原点连线 之间。
Math.atan2(y, x) 接受单独的 x 和 y 参数，而 atan 接受两个参数的比值。

matrix

CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。
a b c d: 描述线性变换的 number 。
tx ty: 描述如何应用这个变换的 number 。

转换关系

CSS3 transform 中的 matrix
[
[a, c, e]
[b, d, f]
[0, 0, 1]
]
2D的转换是由一个3*3的矩阵表示的，前两行代表转换的值，分别是 a b c d e f ，要注意是竖着排的，第一行代表的是X轴变化，第二行代表的是Y轴的变化，第三行代表的是Z轴的变化，2D不涉及到Z轴，这里使用 0 0 1

理解CSS3 transform中的Matrix(矩阵)

拖动/移动元素

目标元素mousedown 的时候开始监听document的mousemove事件，计算出鼠标移动的位移，然后添加的目标元素的offsetLeft和offsetTop 上。
如果有缩放，需要把缩放的位移还原回去。

methods: {
  async eleMousedown(event, field) {
    this.currFormField_element_name = field.model;
    const { target, x, y, offsetX, offsetY } = event;
    await this.$nextTick();
    const targetDom = document.getElementsByClassName('editor-monkey-interaction-element-activated')[0];
    let { offsetLeft, offsetTop } = targetDom;
    console.log('mousedown', event, offsetLeft, offsetTop, offsetX, offsetY);
    document.onmousemove = throttle((e) => {
      const { x: newX, y: newY } = e;
      const translateX = newX - x;
      const translateY = newY - y;
      const left = offsetLeft + translateX / this.scale;
      const top = offsetTop + translateY / this.scale;
      console.log('mousemove', e, translateX, translateY);
      if (target.className.includes('el-icon-refresh-right')) {
        const tan = translateY / translateX;
        const deg = Math.atan2(tan) * 180 / Math.PI;
        targetDom.style.transform = `rotate(${deg}deg)`;
        console.log('rotate', deg);
        return;
      }
      targetDom.style.left = `${left}px`;
      targetDom.style.top = `${top}px`;
      // targetDom.style.transform =`translate(${translateX}px, ${translateY}px)`;
    }, 200);
    document.onmouseup = function(e) {
      console.log('mouseup',e);
      document.onmousemove = null;
      document.onmouseup = null;
    };
  },
}